<template>
  <div class="approval-print-page">
    <a-button
      type="primary"
      ghost
      v-print="printObj"
      style="display: none"
      id="printButton"
    >
      打印
    </a-button>
    <div class="approval_print" v-if="detail.approval_id" id="printContent">
      <h1 class="approval_print_title">{{ detail.approval_name }}</h1>
      <div class="approval_print_header">
        <div class="corp_name"></div>
        <div class="approval_spNo">审批编号: {{ detail.form_id }}</div>
      </div>
      <table class="approval_print_data">
        <tr>
          <td class="approval_print_data_title">申请人</td>
          <td class="approval_print_data_value">{{ detail.user_name }}</td>
          <td class="approval_print_data_title">申请人部门</td>
          <td class="approval_print_data_value">
            {{ detail.department_name || "--" }}
          </td>
        </tr>
        <tr>
          <td class="approval_print_data_title">提交时间</td>
          <td class="approval_print_data_value">{{ detail.created_at }}</td>
          <td class="approval_print_data_title">当前审批状态</td>
          <td class="approval_print_data_value">{{ detail.status_txt }}</td>
        </tr>
        <template v-if="detail.form && detail.form.length > 0">
          <tr>
            <td class="approval_print_data_space" colspan="4"></td>
          </tr>
          <tr>
            <td colspan="4" class="approval_print_data_title">申请内容</td>
          </tr>
          <tr v-for="(item, index) of detail.form" :key="index">
            <template v-if="item.type == 'detail'">
              <td
                class="approval_print_data_value approval_print_data_title_center"
              >
                {{ item.title }}
              </td>
              <td class="approval_print_data_value" colspan="3">
                <div
                  v-for="(detailItem, detailIndex) of item.value[0]"
                  :key="detailIndex"
                >
                  <template v-if="detailItem.type == 'check'">
                    {{ detailItem.value.join() }}
                  </template>
                  <template
                    v-else-if="
                      detailItem.type == 'image' || detailItem.type == 'file'
                    "
                  >
                    <div
                      v-for="(valueItem, valueIndex) of detailItem.value"
                      :key="valueIndex"
                    >
                      <span>{{ valueIndex + 1 }}.</span>
                      <span style="margin-left: 5px">{{ valueItem.name }}</span>
                    </div>
                  </template>
                  <template v-else-if="detailItem.type == 'daterange'">
                    <span>{{ detailItem.value.start }}</span>
                    <span style="padding: 0 5px">至</span>
                    <span>{{ detailItem.value.end }}</span>
                    <span>，共{{ detailItem.value.duration }}天</span>
                  </template>
                  <template v-else>
                    {{ detailItem.value }}
                  </template>
                </div>
              </td>
            </template>
            <template v-else>
              <td
                class="approval_print_data_value approval_print_data_title_center"
              >
                {{ item.title }}
              </td>
              <td class="approval_print_data_value" colspan="3">
                <template v-if="item.type == 'check'">
                  {{ item.value.join() }}
                </template>
                <template
                  v-else-if="item.type == 'image' || item.type == 'file'"
                >
                  <div v-for="(item, index) of item.value" :key="index">
                    <span>{{ index + 1 }}.</span>
                    <span style="margin-left: 5px">{{ item.name }}</span>
                  </div>
                </template>
                <template v-else-if="item.type == 'daterange'">
                  <span>{{ item.value.start }}</span>
                  <span style="padding: 0 5px">至</span>
                  <span>{{ item.value.end }}</span>
                  <span>，共{{ item.value.duration }}天</span>
                </template>
                <template v-else>
                  {{ item.value }}
                </template>
              </td>
            </template>
          </tr>
        </template>
        <tr>
          <td class="approval_print_data_space" colspan="4"></td>
        </tr>
        <tr>
          <td colspan="4" class="approval_print_data_title">
            审批流程-{{ detail.status_txt }}
          </td>
        </tr>
        <tr>
          <td
            class="approval_print_data_title approval_print_data_title_center"
          >
            审批节点
          </td>
          <td
            class="approval_print_data_title approval_print_data_title_center"
          >
            操作人
          </td>
          <td
            class="approval_print_data_title approval_print_data_title_center"
            colspan="2"
          >
            操作记录
          </td>
        </tr>
        <tr v-for="processItem of process" :key="processItem.key">
          <template v-if="processItem.type !== 'end'">
            <td
              class="approval_print_data_value approval_print_data_title_center"
            >
              <div>{{ processItem.typeTxt }}</div>
            </td>
            <!-- 发起 -->
            <template v-if="processItem.type == 'start'">
              <td
                class="approval_print_data_value approval_print_data_title_center"
              >
                {{ detail.user_name }}
              </td>
              <td
                class="approval_print_data_value approval_print_data_title_center"
                colspan="2"
              >
                <span>已发起</span>
                <span style="margin-left: 10px">{{
                  detail.created_at.slice(0, 16)
                }}</span>
              </td>
            </template>
            <!-- 审批 -->
            <template v-else-if="processItem.type == 'approval'">
              <td
                class="approval_print_data_value approval_print_data_title_center"
                colspan="3"
                style="padding: 0"
                v-if="
                  processItem.data.approver_userArr &&
                  processItem.data.approver_userArr.length > 0
                "
              >
                <div
                  v-for="item of processItem.data.approver_userArr"
                  :key="item.id"
                  style="display: flex; align-items: center"
                >
                  <div style="width: 40%; text-align: center; padding: 4px 8px">
                    {{ item.realname }}
                  </div>
                  <template v-if="item.op_type">
                    <div
                      style="width: 60%; text-align: center; padding: 4px 8px"
                    >
                      <span>
                        {{ item.op_type == "agree" ? "已通过" : "已拒绝" }}
                      </span>
                      <span style="margin-left: 10px">{{
                        item.op_time.slice(0, 16)
                      }}</span>
                    </div>
                  </template>
                  <template v-else>
                    <div
                      style="
                        width: 60%;
                        text-align: center;
                        padding: 4px 8px;
                        visibility: hidden;
                      "
                    >
                      <span>已发起</span>
                      <span style="margin-left: 10px">{{
                        detail.created_at.slice(0, 16)
                      }}</span>
                    </div>
                  </template>
                </div>
              </td>
            </template>
            <!-- 办理 -->
            <template v-else-if="processItem.type == 'deal'">
              <td
                class="approval_print_data_value approval_print_data_title_center"
                colspan="3"
                style="padding: 0"
                v-if="
                  processItem.data.dealer_userArr &&
                  processItem.data.dealer_userArr.length > 0
                "
              >
                <div
                  v-for="item of processItem.data.dealer_userArr"
                  :key="item.id"
                  style="display: flex; align-items: center"
                >
                  <div style="width: 40%; text-align: center; padding: 4px 8px">
                    {{ item.realname }}
                  </div>
                  <template v-if="item.op_type">
                    <div
                      style="width: 60%; text-align: center; padding: 4px 8px"
                    >
                      <span>
                        {{ item.op_type == "agree" ? "已通过" : "已拒绝" }}
                      </span>
                      <span style="margin-left: 10px">{{
                        item.op_time.slice(0, 16)
                      }}</span>
                    </div>
                  </template>
                  <template v-else>
                    <div
                      style="
                        width: 60%;
                        text-align: center;
                        padding: 4px 8px;
                        visibility: hidden;
                      "
                    >
                      <span>已发起</span>
                      <span style="margin-left: 10px">{{
                        detail.created_at.slice(0, 16)
                      }}</span>
                    </div>
                  </template>
                </div>
              </td>
            </template>
            <!-- 抄送 -->
            <template v-else-if="processItem.type == 'copy'">
              <td
                class="approval_print_data_value approval_print_data_title_center"
                colspan="3"
              >
                <span>已抄送给</span>
                <div
                  v-if="
                    processItem.data.ccList_userArr &&
                    processItem.data.ccList_userArr.length > 0
                  "
                  style="display: inline-block; margin-left: 10px"
                >
                  <span
                    v-for="(item, index) of processItem.data.ccList_userArr"
                    :key="item.id"
                  >
                    {{ item.realname
                    }}<i
                      v-if="index < processItem.data.ccList_userArr.length - 1"
                      >、</i
                    >
                  </span>
                  <span style="margin-left: 10px"
                    >共{{ processItem.data.ccList_userArr.length }}人</span
                  >
                </div>
              </td>
            </template>
            <template v-else>
              <td
                class="approval_print_data_value approval_print_data_title_center"
              >
                彭家庭
              </td>
              <td
                class="approval_print_data_value approval_print_data_title_center"
                colspan="2"
              >
                已同意 9/10 19:19
              </td>
            </template>
          </template>
        </tr>
      </table>

      <div class="approval_print_info">
        <div class="approval_print_info_date">
          打印日期：{{ moment().format("YYYY-MM-DD HH:mm") }}
        </div>
        <br />
        <div class="approval_print_info_user" v-if="userInfo.realname">
          打印人：{{ userInfo.realname }}
        </div>
      </div>
      <div class="approval_print_qr">
        <div class="approval_print_qr_image_wrap">
          <qrcode-vue :value="codeUrl" :size="70" level="M" />
        </div>
        <p class="approval_print_qr_text">使用手机微信<br />扫一扫</p>
      </div>
    </div>
  </div>
</template>

<script>
import {
  defineComponent,
  reactive,
  toRefs,
  toRaw,
  computed,
  nextTick,
} from "@vue/runtime-core";
import { useRoute } from "vue-router";
import request from "../../../common/utils/request";
import QrcodeVue from "qrcode.vue";
import utils from "../../../common/utils/utils";
import defaultSetting from "../../../common/utils/defaultSetting";
import store from "../../../store";
import {} from "@ant-design/icons-vue";
import moment from "moment";
import print from "vue3-print-nb";

export default defineComponent({
  name: "Print",
  components: {
    QrcodeVue,
  },
  directives: {
    print,
  },
  setup() {
    const route = useRoute();
    const state = reactive({
      detail: {},
      process: [],
    });

    const getApprovalDetail = () => {
      state.detail = {};
      state.process = [];
      request
        .get("/work_approval", "/staff/approval/form/detail", {
          id: route.query.id,
        })
        .then((res) => {
          state.detail = res.detail;
          state.process = res.detail.process;
          console.log("-------------getApprovalDetail", toRaw(state.process));

          nextTick(() => {
            document.getElementById("printButton").click();
          });
        });
    };

    const init = () => {
      if (route.query.id) {
        getApprovalDetail();
      }
    };

    init();

    const codeUrl = computed(() => {
      console.log("store", store.getters);
      let url = `${
        utils.isEnv()
          ? "https://app.kuaijingai.com"
          : defaultSetting.requestDomain
      }/h5_orgs/pages/approval/detail?org_id=${
        store.getters.userInfo.org_id
      }&id=${route.query.id}`;
      console.log("codeUrl", codeUrl);
      return url;
    });

    const userInfo = computed(() => {
      let userInfo = {};
      if (store.getters.iframeData && store.getters.iframeData.userInfo) {
        userInfo = JSON.parse(store.getters.iframeData.userInfo);
      }
      return userInfo;
    });

    let printObj = {
      id: "printContent",
      popTitle: "资产标签",
      extraCss: `${utils.staticPath}/file/approval/PrintIframe.css`,
      extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>',
      beforeOpenCallback(vue) {
        vue.printLoading = true;
        console.log("打开之前");
      },
      openCallback(vue) {
        vue.printLoading = false;
        console.log("执行了打印");
      },
      closeCallback(vue) {
        console.log("关闭了打印工具");
      },
    };

    return {
      ...toRefs(state),
      codeUrl,
      moment,
      userInfo,
      printObj,
    };
  },
});
</script>
<style lang="less" scoped>
.approval-print-page {
  .approval_print {
    width: 640px;
    margin: 0 auto;
    padding-top: 18px;
    font-family: "lucida Grande", Verdana, "Microsoft YaHei";
  }

  .approval_print_pdf {
    width: 640px;
  }

  .approval_print_title {
    margin-bottom: 20px;
    font-size: 15px;
    font-weight: bold;
    text-align: center;
  }

  .approval_print_data {
    width: 100%;
    border-spacing: 1px;
    border-collapse: collapse;
    table-layout: fixed;
  }

  .approval_print_data tr {
    border-left: 1px solid #787878;
    border-right: 1px solid #787878;
  }

  .approval_print_data_value,
  .approval_print_data_title {
    height: 18px;
    padding: 4px 8px;
    border: 1px solid #787878;
    overflow: hidden;
    word-break: break-word;
    word-wrap: break-word;
  }

  .approval_print_data_value {
    width: 30%;
    background-color: #fff;
    font-size: 12px;
  }

  .approval_print_data_title {
    width: 16%;
    background-color: #f3f3f3;
    color: #000;
    font-size: 12px;
    text-align: center;
  }

  .approval_print_data_value ul,
  .approval_print_data_value ol {
    list-style: disc;
    padding-left: 20px;
  }

  .approval_print_data_value li {
    list-style: disc;
    padding-left: 0;
  }

  .approval_print_data_value ol li {
    list-style: decimal;
  }

  .approval_print_data_value pre {
    white-space: pre-wrap;
    overflow-wrap: break-word;
    font-family: "lucida Grande", Verdana, "Microsoft YaHei";
    margin-bottom: 0;
  }

  .approval_print_data_sectionTitle {
    height: 30px;
    padding-left: 25px;
    background-color: #fff;
    font-size: 12px;
    color: #000;
  }

  .approval_print_data_space {
    height: 15px;
    background: #fff;
    border-right: 1px solid #787878;
    border-left: 1px solid #787878;
  }

  .approval_print_space_title {
    height: 20px;
    background: #f3f3f3;
    text-align: center;
    border: 1px solid #787878;
    font-size: 12px;
  }

  .approval_print_info {
    float: right;
    padding-top: 40px;
    line-height: 20px;
    font-size: 12px;
    text-align: left;
  }

  .approval_print_data_title_center {
    text-align: center;
  }

  .approval_print_info_date,
  .approval_print_info_user {
    display: inline-block;
    margin-left: 30px;
  }

  .approval_print_qr {
    height: 120px;
    display: flex;
    align-items: center;
  }

  .approval_print_qr_image_wrap img {
    vertical-align: top;
    width: 70px;
    height: 70px;
    float: left;
    margin-right: 10px;
  }

  .approval_print_qr_text {
    font-size: 12px;
    line-height: 20px;
    padding-left: 15px;
    margin-bottom: 0;
  }

  .approval_print_data_value_commentItem {
    line-height: 25px;
  }

  .print_tips_value {
    color: rgba(11, 18, 26, 0.6);
  }

  .approval_nested_table {
    width: 100%;
    height: 100%;
    border-spacing: 1px;
    border-collapse: collapse;
    table-layout: fixed;
  }

  .approval_print_data_nested {
    padding: 0;
    border: none;
  }

  .approval_print_data_nested_1 .approval_print_data_title {
    border-bottom: none;
  }

  .approval_nested_table .approval_print_data_title:last-child,
  .approval_nested_table .approval_print_data_value:last-child {
    border-right: none;
  }

  .approval_nested_table .approval_print_data_title:first-child,
  .approval_nested_table .approval_print_data_value:first-child {
    border-left: none;
  }

  .approval_nested_table tr {
    border-left: none;
    border-right: none;
  }

  .approval_print_header > div {
    margin-bottom: 4px;
    font-size: 12px;
    color: #000;
  }

  .approval_print_header .corp_name {
    float: left;
    max-width: 400px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    font-weight: 500;
  }

  .approval_print_header .approval_spNo {
    float: right;
    font-weight: 400;
  }

  .approval_print_header::after {
    content: "";
    display: inline-block;
    clear: both;
  }
}
</style>
